<!-- Created by caiqi on 17/6/19. -->
<template>
  <div>
    <div class="LoginIcon">
      <div class='Login'>
        <div class="LoginBox">
          <el-input class="inp" v-model="LoginInfo.username" clearable placeholder="请输入用户名"></el-input>
          <el-input class="inp" type="password" clearable v-model="LoginInfo.password" placeholder="请输入密码" auto-complete="off"></el-input>
          <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="6">
              <el-button class="btn" type="primary" @click="Login()">登 录</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>


<script type="text/ecmascript-6">
import api from "@/api/index";
import tools from "@/server/storage.server";

export default {
  props: ["inNext"],
  data() {
    return {
      in_next: "",
      canNext: false,
      LoginInfo: {}
    };
  },
  methods: {
    async Login() {
      const { data } = await api.adminLogin(this.LoginInfo);
      if (this.in_next !== "") {
        const localUser = tools.get("userInfo");
        if (!localUser) {
          tools.clear();
          this.$message.error("账号信息错误！");
        }
        // {"user_name":"root","jurisdiction":9}
        if (
          data.user.user_name === localUser.user_name &&
          data.user.jurisdiction === localUser.jurisdiction
        ) {
          this.canNext = true;
        } else {
          this.$message.error("信息与已登录信息不符！");
        }
      } else {
        tools.set("token", data.token);
        tools.set("userInfo", data.user);
        this.$router.replace({
          name: "home"
        });
      }
    }
  },
  mounted() {
    if (this.$props.inNext) {
      this.in_next = this.$props.inNext;
      return;
    }
    const token = tools.get("token");
    if (token) {
      this.$router.replace({
        name: "home"
      });
    }
  },
  watch: {
    inNext(val) {
      if (!val) {
        this.canNext = false;
        this.LoginInfo = {};
      }
      this.in_next = val;
    },
    canNext(val) {
      this.$emit("outCanNext", val);
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@import "../sass/Piece";
@import "../sass/Base";
.LoginIcon {
  padding-top: 40vh;
  background-image: url("~@/assets/image/loginicon.gif");
  background-position: center 10%;
  background-size: 20rem auto;
  background-repeat: no-repeat;
}

.Login {
  overflow: hidden;
  margin: 0 auto;
  width: 20rem;
  transition: 0.5s;
  .inp {
    margin-bottom: 20px;
  }
  .btn {
    margin: 0 auto;
  }
}
</style>
